{{define "user/message.html"}}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>anoduo-留言板</title>
    <link href="../../static/images/me.jpg" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="../../static/css/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
</head>

<body>

    <!--导航-->
    <nav class="gird-header">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui olive header item" style="font-family: STSong">anoduo</h2>
                <a href="/" class="m-item item m-mobile-hide "><i class="home icon"></i>首页</a>
                <a href="/blog/list/type" class="m-item item m-mobile-hide"><i class="clone outline icon"></i>分类</a>
                <a href="/archives" class="m-item item m-mobile-hide"><i class="clock icon"></i>时间轴</a>
                <a href="/comment/0" class="active m-item item m-mobile-hide"><i class="book icon"></i>留言板</a>
                <a href="/link" class="m-item item m-mobile-hide"><i class="pencil alternate icon"></i>友人帐</a>
                <a href="/picture" class="m-item item m-mobile-hide"><i class="image icon"></i>照片墙</a>
                <a href="/about" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui icon transparent input m-margin-tb-tiny" style="color: white">
                        <input style="color: white" type="text" name="query" placeholder="Search...." id="query">
                        <i onclick="search()" class="search link icon"></i>
                    </div>
                </div>
                <!-- 用户信息 -->
                <div class="right m-item m-mobile-hide menu">
                    <div class="ui dropdown  item">
                        <div class="text">
                            <img class="ui avatar image" src="../../../static/images/me.jpg" id="yonghu_img">
                            <span id="yonghu_name">未登录</span>
                        </div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <a href="/admin" class="item" id="yonghu_admin" style="display: none;">进入后台</a>
                            <a href="/login" class="item" id="yonghu_href">登录</a>
                        </div>
                    </div>
                </div>
                <!-- 用户信息 -->
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>


    <!--顶部图片-->
    <div class="m-bg-type_outer" style="width: 100%;height: 40%">
        <img src="../../static/images/messagebg.jpg" alt="" class="ui m-bg image" style="width: 100%;height: 100%">
        <div class="m-bg-class_cover">
            <div class="ui container" style="position: relative ;bottom: -540px;">
                <div class="m-font-size-title m-right-bottom" align="center" style="font-family:'STXingkai'">留言板</div>
                <div class="m-font-size-text-init-title m-margin-top" align="center">人生就是不公平的,你慢慢习惯吧你
                </div>
            </div>
        </div>
    </div>


    <!--中间内容-->
    <div id="waypoint" class="m-margin- animated fadeIn">
        <div class="ui container m-opacity box-shadow-max">
            <!--                新增留言-->
            <div id="message-form" class="ui form">
                <input type="hidden" id="parent_id" name="parent_id" value="-1">
                <input type="hidden" id="blog_id" value="-1">
                <!--                    留言区-->
                <div class="field">
                    <textarea id="content" name="content" placeholder="请输入留言信息..."></textarea>
                </div>
                <div class="ui grid">
                    <div class="right aligned nine wide column">
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <button id="messagepost-btn" type="button" class="ui teal button m-mobile-wide"
                                onclick="submit()"><i class="edit icon"></i>发布</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 成功 -->
            <div class="ui success message" style="display: none;" id="success">
                <div class="header">
                    执行成功！
                </div>
                <p>页面刷新中。。。</p>
            </div>
            <!-- 失败 -->
            <div class="ui error message" style="display: none;" id="error">
                <div class="header" id="errorMsg">
                    您提交的一些错误
                </div>
                <p>请重试！</p>
            </div>
            <!-- 查询失败的提示信息 -->
            {{if .error}}
            <div class="ui error message">
                <div class="header">
                    {{.error}}
                </div>
                <p>请重试！</p>
            </div>
            {{end}}

            <!--留言区-->
            <!-- 这么做的目的是不能在range里直接获取到.username,所以提前赋值 -->
            {{$name:=.username}}
            <div class="ui bottom attached m-margin-top">
                <div id="message-container" class="ui teal segment">
                    <div>
                        <div class="ui threaded comments" style="max-width: 100%;">
                            <h3 class="ui dividing header">留言</h3>
                            <!-- 父留言 -->
                            {{range .comments}}
                            <div class="comment">
                                <!-- 头像 -->
                                {{if eq .UserName "admin"}}
                                <a class="avatar">
                                    <img src="../../static/images/avatar.png">
                                </a>
                                {{else}}
                                <a class="avatar">
                                    <img src="../../static/images/avatar2.png">
                                </a>
                                {{end}}
                                <div class="content">
                                    <a class="author">
                                        <span>{{.UserName}}</span>
                                        {{if .Admin}}
                                        <div class="ui mini basic teal left pointing label m-padded-mini">栈主</div>
                                        {{end}}
                                    </a>
                                    <div class="metadata">
                                        <span class="date">{{.CreateTime}}</span>
                                    </div>
                                    <div class="text">{{.Content}}</div>
                                    <div class="actions">
                                        <a class="reply" data-messageid="{{.Id}}" data-messagenickname="{{.UserName}}"
                                            onclick="reply(this)">回复</a>
                                        <!-- 只有管理员才能删除评论 -->
                                        {{if eq $name "admin"}}
                                        <a class="delete" href="/comment/delete/{{.Id}}"
                                            onclick="return confirm('确定要删除该评论吗？')">删除</a>
                                        {{end}}
                                    </div>
                                </div>
                                <!--子集留言-->
                                {{range .Childs}}
                                <div class="comments">
                                    <div class="comment">
                                        <!-- 头像 -->
                                        {{if eq .UserName "admin"}}
                                        <a class="avatar">
                                            <img src="../../static/images/avatar.png">
                                        </a>
                                        {{else}}
                                        <a class="avatar">
                                            <img src="../../static/images/avatar2.png">
                                        </a>
                                        {{end}}
                                        <div class="content">
                                            <a class="author">
                                                <span>{{.UserName}}</span>
                                                {{if .Admin}}
                                                <div class="ui mini basic teal left pointing label m-padded-mini">栈主
                                                </div>
                                                {{end}}
                                                &nbsp;<span class="m-teal">@ {{.ParentName}}</span>
                                            </a>
                                            <div class="metadata">
                                                <span class="date">{{.CreateTime}}</span>
                                            </div>
                                            <div class="text">{{.Content}}</div>
                                            <div class="actions">
                                                <a class="reply" data-messageid="{{.Id}}"
                                                    data-messagenickname="{{.UserName}}" onclick="reply(this)">回复</a>
                                                <!-- 只有管理员才能删除评论 -->
                                                {{if eq $name "admin"}}
                                                <a class="delete" href="/comment/delete/{{.Id}}"
                                                    onclick="return confirm('确定要删除该评论吗？')">删除</a>
                                                {{end}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{end}}
                                <!--子集留言-->
                            </div>
                            {{end}}
                            <!-- 父留言 -->

                        </div>
                    </div>

                </div>
                <div class="ui inverted divided stackable grid">
                    <div class="three wide column" align="center">
                        {{if ne .page 1}}
                        <a class="item" href="/comment/{{.pre}}">上一页</a>
                        {{end}}
                    </div>

                    <div class="ten wide column" align="center">
                        <p>第 <span>{{.page}}</span> 页，共 <span>{{.total}}</span> 页，共有 <span>{{.count}}</span> 条留言</p>
                    </div>

                    <div class="three wide column" align="center">
                        {{if ne .page .total}}
                        <a class="item" href="/comment/{{.page}}">下一页</a>
                        {{end}}
                    </div>
                </div>
            </div>
            <!--留言区-->

            <br>
            <br>
            <br>

        </div>
    </div>


    <br>
    <br>
    <br>


    <!--底部栏-->
    <footer class="ui inverted vertical segment m-padded-tb-massive m-opacity">
        <!--容器-->
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="four wide column">
                    <div style="font-size: large;font-weight: bold"
                        class="ui inverted m-text-thin m-text-spaced m-margin-top-max">联系我</div>
                    <div class="ui inverted link list">
                        <div href="#" class="m-text-thin">Email：767440849@qq.com</div>
                        <div href="#" class="m-text-thin">QQ：767440849</div>
                    </div>
                </div>

                <div class="four wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <!--微信二维码-->
                            <div style="font-size: large;font-weight: bold"
                                class="ui inverted m-text-thin m-text-spaced ">关注公众号</div>
                            <img src="../../static/images/oneStar.jpg" class="ui m-margin-top rounded image" alt=""
                                style="width: 110px">
                        </div>
                    </div>
                </div>

                <div class="four wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <!--微信二维码-->
                            <div style="font-size: large;font-weight: bold"
                                class="ui inverted m-text-thin m-text-spaced ">问题交流（QQ群）</div>
                            <img src="../../static/images/QQ-question.jpg" class="ui m-margin-top rounded image" alt=""
                                style="width: 110px">
                        </div>
                    </div>
                </div>
                <!--博客运行时间统计-->
                <div class="four wide column">
                    <div style="font-size: large;font-weight: bold"
                        class="ui inverted  m-text-thin m-text-spaced m-margin-top">客栈信息</div>
                    <div id="blog-message">
                        <div class="ui inverted link list" style="align-content: center;margin-top: 10px">
                            <div class="m-text-thin" style="text-align: left;margin-left: 75px;">
                                文章总数： <h2 class="ui orange header m-inline-block m-margin-top-null"
                                    style="font-size:medium;" id="blog_count"> 0 </h2> 篇
                            </div>
                            <div class="m-text-thin" style="text-align: left;margin-left: 75px">
                                访问总数： <h2 class="ui orange header m-inline-block m-margin-top-null"
                                    style="font-size:medium;" id="view_count"> 0 </h2> 次
                            </div>
                            <div class="m-text-thin" style="text-align: left;margin-left: 75px">
                                评论总数： <h2 class="ui orange header m-inline-block m-margin-top-null"
                                    style="font-size:medium;" id="comment_count"> 0 </h2> 条
                            </div>
                            <div class="m-text-thin" style="text-align: left;margin-left: 75px">
                                留言总数： <h2 class="ui orange header m-inline-block m-margin-top-null"
                                    style="font-size:medium;" id="message_count"> 0 </h2> 条
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <div style="color: #F08047;margin-top: -18px" class="ui inverted m-text-thin m-text-spaced">我的客栈已营业：<span
                    id="htmer_time" class="item m-text-thin"></span> (*๓´╰╯`๓)</div>
        </div>
        </div>

    </footer>


    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/semantic.min.js"></script>
    <script src="../../static/js/footer.js"></script>
    <script src="../../static/js/search.js"></script>
    <script src="../../static/js/info.js"></script>
    <script src="../../static/js/user/message.js"></script>
</body>

</html>
{{end}}